﻿@page "/Register"
@layout NullLayout
@using System.ComponentModel.DataAnnotations;
@using System.Text.Json;
@inject HttpClient _httpCilent;
@inject IMessageService _message;
@inject NotificationService _notice;
<PageTitle>注册</PageTitle>
<Layout>
    <div class="BackImg @ImgClass" style="background-image:url('@(Imgs[ImgIndex])');">
    </div>
    <GridRow>
        <GridCol Xs="24" Sm="24" Md="12" Lg="10" Xl="8" style="min-height:100vh;backdrop-filter: blur(2px);background-color:#000000ba;">
            <div style="margin:50px;">
                <Title style="color:white">注册</Title>
                <Paragraph style="color:white">
                    欢迎您成为我们喵喵休息站的员。喵喵休息站是一个团结有爱的大家庭，在加入家庭之前，我们强烈建议您阅读本站的<a>社区规则</a>。喔喔，但这毕竟是老师作业，所以我并不打算写什么社区规则了，就这样吧。
                </Paragraph>
                <Title Level="2" style="color:white">填写内容</Title>
                <Paragraph style="color:white">
                    我们向您承诺，您的信息只会保存在自己的MySql服务器中，因为这是一个学校的作业。
                </Paragraph>
                <Paragraph style="color:white">
                    <Text Strong></Text>
                    <Form @ref="form"
                          Model="@model"
                          OnFinish="OnFinish"
                          OnFinishFailed="OnFinishFailed"
                          LabelColSpan="8"
                          WrapperColSpan="16">
                        <FormItem Label="喵号（账号）" LabelStyle="color:white;" LabelAlign="AntLabelAlignType.Left">
                            <Input @bind-Value="@context.Account" />
                        </FormItem>
                        <FormItem Label="喵码（密码）" LabelStyle="color:white;" LabelAlign="AntLabelAlignType.Left">
                            <InputPassword @bind-Value="@context.Password" />
                        </FormItem>
                        <FormItem Label="性别" LabelStyle="color:white;" LabelAlign="AntLabelAlignType.Left">
                            <Select @bind-Value="@context.Gender"
                                    TItemValue="string"
                                    TItem="string"
                                    DefaultActiveFirstOption="false"
                                    Placeholder="Select an option and the input above will be changed"
                                    OnSelectedItemChanged="OnGenderChanged">
                                <SelectOptions>
                                    <SelectOption TItemValue="string" TItem="string" Value="@("Male")" Label="Male" />
                                    <SelectOption TItemValue="string" TItem="string" Value="@("Female")" Label="Female" />
                                    <SelectOption TItemValue="string" TItem="string" Value="@("Other")" Label="Other" />
                                </SelectOptions>
                            </Select>
                        </FormItem>
                        <FormItem Label="说点什么吧" LabelStyle="color:white;" LabelAlign="AntLabelAlignType.Left">
                            <TextArea Rows="4" @bind-Value="@context.Description" />
                        </FormItem>
                        <FormItem WrapperColOffset="0" WrapperColSpan="16">
                            <Button Type="@ButtonType.Primary" HtmlType="submit" style="color:white">
                                提交
                            </Button>
                            <Button OnClick="Reset">
                                重置
                            </Button>
                            <Button Type="@ButtonType.Link" OnClick="OnFill">
                                Fill form
                            </Button>
                        </FormItem>
                    </Form>
                </Paragraph>
            </div>
        </GridCol>
    </GridRow>
</Layout>
<style>
    Title {
        color: white;
    }

    Paragraph {
        color: white;
    }

    .BackImg {
        position: fixed;
        height: 100vh;
        width: 102vw;
        background-color: antiquewhite;
        background-size: cover;
        background-position: center;
        filter: brightness(0%);
        right: 0;
    }

    .BackImgAni {
        animation-name: switchImg;
        animation-duration: 10s;
        animation-direction: alternate;
        animation-iteration-count: 1;
        animation-play-state: unset;
    }

    @@keyframes switchImg {
        0% {
            background-position-x: 0;
            filter: brightness(0%);
        }

        20% {
            filter: brightness(100%);
        }

        80% {
            filter: brightness(100%);
        }

        100% {
            background-position-x: 10px;
            filter: brightness(0%);
        }
    }
</style>
@code {
    public class Model {
        [Required]
        public string Account { get; set; }
        [Required]
        [MinLength(5)]
        public string Password { get; set; }
        [Required]
        public string Gender { get; set; }
        public string Description { get; set; }
    }

    private Model model = new Model();
    private Form<Model> form; //引用子表单操作，可以做很多事情

    private void OnFill(MouseEventArgs args) {
        //测试表格的使用方法，还可以使用form.submit()进行提交表单
        //model.Account = "Hello Sir!";
        //model.Gender = "Male";
        //Console.WriteLine($"form ref:{form}");
    }

    private void Reset(MouseEventArgs args) {
        form.Reset();
    }

    private async void OnFinish(EditContext editContext) {
        Console.WriteLine($"Success:{JsonSerializer.Serialize(model)}");
        //开始请求后端
        using var response = await _httpCilent.PostAsJsonAsync(GobalManager.serverURL + "/AddUsr", new { usrID = model.Account, usrPwd = model.Password, usrDescription = model.Description, usrGender = model.Gender });
        if (response.StatusCode == System.Net.HttpStatusCode.Locked) {
            _notice.Open(new NotificationConfig() {
                    Message = "注册失败了，账号相同！",
                    NotificationType = NotificationType.Warning,
                    Description = "已经存在相同的账号，您必须重新编写一个可用的账号。"
                });
        } else {
            _notice.Open(new NotificationConfig() {
                    Message = "成功注册了账号",
                    Duration = 0,
                    Description = "您已经成功注册了喵喵网的账号，下面请关闭本页面，返回之前的页面吧！"
                });
        }
    }

    private void OnFinishFailed(EditContext editContext) {
        Console.WriteLine($"Failed:{JsonSerializer.Serialize(model)}");
    }

    private void OnGenderChanged(string gender) {
        model.Gender = gender;
    }

    async void AutoSwitchImg(int milSec) {
        while (true) {
            await Task.Delay(milSec);
            ImgIndex = (++ImgIndex) % Imgs.Length;
            ImgClass = " ";
            StateHasChanged();
            await Task.Delay(400);
            ImgClass = "BackImgAni";
            StateHasChanged();
        }
    }
    string ImgClass = "BackImgAni";
    int ImgIndex = 0;
    string[] Imgs = new string[] { @"./Resources/RegisterIndex01.png", @"./Resources/RegisterIndex02.JPG", @"./Resources/RegisterIndex03.JPG" };
    protected override void OnAfterRender(bool firstRender) {
        if (firstRender) {
            this.AutoSwitchImg(10000);
        }
        base.OnAfterRender(firstRender);
    }
    //修改背景图像
}

